import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { message, Button, Modal } from 'antd';
import { WeaDocFileIconView } from '../../public';
import moment from 'moment';
import { openWindow } from '../../util/index';

const data = [
   {
            id: '4',
            type: 'file',
            textname: '上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx',
            selected: false,
            isFav: false,
            parentid: 'home',
            uptime: '2019-10-01 10:25:57',
            titleText: { icon: '名称：上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx<br/>大小：230KB', name: '上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx' },
            ctrlX: false,
         },
   {
      id: '5',
      type: 'file',
      textname: '会议PPT.ppt',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-02 23:25:57',
      titleText: { icon: '名称：会议PPT.ppt<br/>大小：230KB', name: '会议PPT.ppt' },
      ctrlX: false,
   },
   {
      id: '6',
      type: 'file',
      textname: '发布.pdf',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-03 23:25:57',
      titleText: { icon: '名称：发布.pdf<br/>大小：230KB', name: '发布.pdf' },
      ctrlX: false,
   },
   {
      id: '7',
      type: 'file',
      textname: '国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-31 23:25:57',
      titleText: { icon: '名称：国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt<br/>大小：230KB', name: '国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt' },
      ctrlX: false,
   },
   {
      id: '8',
      type: 'file',
      textname: '序ihello.avi',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-29 23:25:57',
      titleText: { icon: '名称：序ihello.avi<br/>大小：230KB', name: '序ihello.avi' },
      ctrlX: false,
   },
   {
      id: '9',
      type: 'file',
      textname: 'Hello World.tsx',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-30 23:25:57',
      titleText: { icon: '名称：Hello World.tsx<br/>大小：230KB', name: 'Hello World.tsx' },
   },
   {
      id: '10',
      type: 'file',
      textname: '天籁之音.mp3',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-11-01 10:25:57',
      titleText: { icon: '名称：天籁之音.mp3<br/>大小：230KB', name: '天籁之音.mp3' },
   },
   {
      id: '11',
      type: 'file',
      textname: '混缩.zip',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-01 15:25:57',
      titleText: { icon: '名称：混缩.zip<br/>大小：230KB', name: '混缩.zip' },
   },
   {
      id: '12',
      type: 'file',
      textname: 'jhello.aaa',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-29 23:25:57',
      titleText: { icon: '名称：jhello.aaa<br/>大小：230KB', name: 'jhello.aaa' },
   },
   {
      id: '4',
      type: 'file',
      textname: '上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-01 10:25:57',
      titleText: { icon: '名称：上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx<br/>大小：230KB', name: '上海市人民政府、上海警备区关于表彰2018年度上海市征兵工作先进单位和先进个人的决定.docx' },
      ctrlX: false,
   },
   {
      id: '5',
      type: 'file',
      textname: '会议PPT.ppt',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-02 23:25:57',
      titleText: { icon: '名称：会议PPT.ppt<br/>大小：230KB', name: '会议PPT.ppt' },
      ctrlX: false,
   },
   {
      id: '6',
      type: 'file',
      textname: '发布.pdf',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-03 23:25:57',
      titleText: { icon: '名称：发布.pdf<br/>大小：230KB', name: '发布.pdf' },
      ctrlX: false,
   },
   {
      id: '7',
      type: 'file',
      textname: '国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-31 23:25:57',
      titleText: { icon: '名称：国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt<br/>大小：230KB', name: '国务院办公厅关于云南大理经济开发区升级为国家级经济技术开发区的复函.txt' },
      ctrlX: false,
   },
   {
      id: '8',
      type: 'file',
      textname: '序ihello.avi',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-29 23:25:57',
      titleText: { icon: '名称：序ihello.avi<br/>大小：230KB', name: '序ihello.avi' },
      ctrlX: false,
   },
   {
      id: '9',
      type: 'file',
      textname: 'Hello World.tsx',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-30 23:25:57',
      titleText: { icon: '名称：Hello World.tsx<br/>大小：230KB', name: 'Hello World.tsx' },
   },
   {
      id: '10',
      type: 'file',
      textname: '天籁之音.mp3',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-11-01 10:25:57',
      titleText: { icon: '名称：天籁之音.mp3<br/>大小：230KB', name: '天籁之音.mp3' },
   },
   {
      id: '11',
      type: 'file',
      textname: '混缩.zip',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-01 15:25:57',
      titleText: { icon: '名称：混缩.zip<br/>大小：230KB', name: '混缩.zip' },
   },
   {
      id: '12',
      type: 'file',
      textname: 'jhello.aaa',
      selected: false,
      isFav: false,
      parentid: 'home',
      uptime: '2019-10-29 23:25:57',
      titleText: { icon: '名称：jhello.aaa<br/>大小：230KB', name: 'jhello.aaa' },
   },
];

let count = 0,
max = 3;

@inject('netDiskStore')
@observer
class IconView extends React.Component {
   componentDidMount() {
      const { setIconViewRef } = this.props.netDiskStore;
      setIconViewRef(this.IconViewRef); // 获取<IconView>组件ref
      document.addEventListener('keydown', this.ctrlXHandle);
   }

   componentWillUnmount() {
      document.removeEventListener('keydown', this.ctrlXHandle);
   }

   ctrlXHandle = (e) => {
      const { rightMenu: { rightHandle_Copy, rightHandle_paste } } = this.props.netDiskStore;
      e.ctrlKey && e.keyCode === 88 && rightHandle_Copy('move'); // ctrl X
      e.ctrlKey && e.keyCode === 67 && rightHandle_Copy('copy'); // ctrl C
      e.ctrlKey && e.keyCode === 86 && rightHandle_paste(); // ctrl V
   };

   // 选中回调 - 图标视图
   selectHandle = (keys, key) => {
      const { fileSystem } = this.props.netDiskStore;
      fileSystem.tableStore.setSelectedRowKeys(keys);
   };

   // 修改文件名的onchange - 图标视图
   // fileNameOnChange = (key, val) => {
   //    const { fileSystem: { setFileSystemData } } = this.props.netDiskStore;
   //    let newData = [...fileSystem.data];
   //    newData.find(f => f.id === key).textname = val.fullName;
   //    setFileSystemData({ data: newData });
   //    console.log("onchange", key, val);
   // };

   // 编辑文件名提交的 回调
   iconViewOnOK = (key, val) => {
      const { fileSystem } = this.props.netDiskStore;
      const { setFileSystemData } = fileSystem;
      let newData = [...toJS(fileSystem.data)];
      let modifyItem = newData.find(f => f.id === key);
      modifyItem.textname = val.fullName;
      modifyItem.uptime = moment().format('YYYY-MM-DD HH:mm:ss');
      // 检查有无重名
      let appear = 0;
      newData.forEach((i) => {
 i.textname === modifyItem.textname && appear++; 
});
      console.log('onOK');
      if (appear > 1) {
         Modal.warning({
            title: '系统提示',
            content: <div>此名称已经存在，请换用别的名称</div>,
         });
         return false;
      }

      // todo 调API，参数： safeIDs textname

      setFileSystemData({ data: newData });
      console.log('icon Ok', key, val);
   };


   // 双击事件 - 图标视图
   folderDoubleClick = (id, e) => {
      const { fileSystem, pathSearch } = this.props.netDiskStore;
      const { setFileSystemData } = fileSystem,
{ setPathSearchData } = pathSearch;
      let aim = toJS(fileSystem.data.find(f => f.id === id));
      if (aim.type === 'folder') {
         setPathSearchData({ path: [...pathSearch.path, { id: String(aim.id), text: aim.textname }] }); // path
         setFileSystemData({ data: [{
            id: '5',
            type: 'file',
            textname: '会议PPT.ppt',
            selected: false,
            isFav: false,
            parentid: 'home',
            uptime: '2019-10-02 23:25:57',
            titleText: { icon: '名称：会议PPT.ppt<br/>大小：230KB', name: '会议PPT.ppt' },
            ctrlX: false,
         }, {
            id: '6',
            type: 'file',
            textname: '发布.pdf',
            selected: false,
            isFav: false,
            parentid: 'home',
            uptime: '2019-10-03 23:25:57',
            titleText: { icon: '名称：发布.pdf<br/>大小：230KB', name: '发布.pdf' },
            ctrlX: false,
         }] }); // todo API接口来了以后，把这行去掉
      } else {
         // let url = `/rdeploy/chatproject/doc/imageFileView.jsp?fileid=53335`;
         // openWindow(url);
      }
   };

   // 取消新建目录 - 图标视图
   iconViewCancel = (key) => {
      if (key.includes('folder')) {
         const { fileSystem } = this.props.netDiskStore;
         const { setFileSystemData } = fileSystem;
         let newData = [];
         fileSystem.data.forEach((i) => {
 String(i.id) !== key && newData.push(i); 
});
         setFileSystemData({ data: newData });
      }
   };

   // 拖入文件夹成功事件回调
   dragSuccessHandle = (to, keys) => {
      const { rightMenu: { moveFiles } } = this.props.netDiskStore;
      moveFiles(to, keys);
   };

   // scrollEnd事件 todo 调API
   scrollEndHandle = (e, type) => {
      const { fileSystem } = this.props.netDiskStore;
      const { setFileSystemData } = fileSystem;
      console.log('end', type, count);
      if (count < max && type === 'down') {
         setFileSystemData({ iconLoading: true });

         setTimeout(() => {
            count++;
            setFileSystemData({ iconLoading: false, data: [...fileSystem.data, ...data] });
         }, 1000);

         console.log('下拉 调API');
      }
      if (count === 0 && type === 'bottom') {
         setFileSystemData({ iconLoading: true });
         count++;
         setTimeout(() => {
            setFileSystemData({ iconLoading: false, data: [...fileSystem.data, ...data] });
         }, 1000);
         console.log('请求第二页API');
      }
   };

   render() {
      const { fileSystem, viewSettings } = this.props.netDiskStore;
      const selectedKeys = toJS(fileSystem.tableStore.selectedRowKeys);

      return (
         <WeaDocFileIconView ecId={`${this && this.props && this.props.ecId || ''}_WeaDocFileIconView@hdv0z1`}
           iconType={'svg'}
           data={toJS(fileSystem.data)}
           editable={true}
           selectable={true}
           editMode={1}
           ref={(e) => {
 this.IconViewRef = e; 
}}
           draggable={true}
           className="MyFile-IconView"
           scrollInnerClass="scroll-inner"
           titleType={'toolTip'}
           namingRules={'compatible'}
            // titlePosition={{ icon: { x: 20, y: 30 }, name: { x: 10, y: 17 } }}
           isEditingSameTime={false} // 是否允许同时编辑
           rightSelect={true} // 是否允许右键选中
           selectMode={1} // 开启选中模式1：单击单选、ctrl+单击多选
           selectedKeys={selectedKeys} // 受控数据，被选中的文件/夹id
           onSelect={this.selectHandle} // 选择事件回调
           editStart={(key) => {
 console.log('editStart', key); 
}} // 编辑按钮回调
           onOk={this.iconViewOnOK}
            // onCancel={this.iconViewCancel}
            // onChange={this.fileNameOnChange}
           onDoubleClick={this.folderDoubleClick}
           dragSuccess={this.dragSuccessHandle}

           loadMore={true}
           wheelAssist={true}
           pageLoading={fileSystem.iconLoading}
           pageEnd={count >= max}
           offsetBottom={50}
           onScrollEnd={!fileSystem.iconLoading && this.scrollEndHandle}
         />
      );
   }
}

export default IconView;
